<template>
  <Card :padding="20" dis-hover>
    <div class="search">
      <Form ref="form" :model="formItem" inline :label-width="70">
        <FormItem prop="loginName" label="登录名">
          <Input v-model="formItem.loginName" placeholder="登录名" style="width: 100px" />
        </FormItem>
        <FormItem prop="realName" label="姓名">
          <Input v-model="formItem.realName" placeholder="姓名" style="width: 100px" />
        </FormItem>
        <FormItem prop="phone" label="手机号码">
          <Input v-model="formItem.phone" placeholder="手机号码" style="width: 100px" />
        </FormItem>
        <FormItem label="院区" prop="areaID">
          <Select v-model="formItem.areaID" style="width:150px" @on-change="areaChg">
            <Option v-for="item in areaList" :value="item.areaID" :key="item.areaID">{{ item.name }}
            </Option>
          </Select>
        </FormItem>
        <FormItem label="部门" prop="deptID">
          <Select v-model="formItem.deptID" style="width:100px" @on-change="deptChg">
            <Option v-for="item in deptList" :value="item.deptID" :key="item.deptID">{{ item.name }}
            </Option>
          </Select>
        </FormItem>
        <FormItem label="角色" prop="roleID">
          <Select v-model="formItem.roleID" style="width:100px">
            <Option v-for="item in roleList" :value="item.roleID" :key="item.roleID">{{ item.name }}
            </Option>
          </Select>
        </FormItem>
        <FormItem label="科室" prop="categoryID">
          <TreeSelect v-model="formItem.categoryID" :data="categoryList.data" v-width="100" />
        </FormItem>
        <Space>
          <Button type="primary" @click="initList(1, 15)" icon="md-search">查询</Button>
          <Button type="error" @click="clear" icon="md-refresh">重置</Button>
          <Button type="success" @click="add(1, {})" icon="md-add">新增</Button>
        </Space>
      </Form>
    </div>

    <Table :paras="{
      columns: table.columns,
      data: table.data,
      loading: table.load,
      pageNo: formItem.pageNo,
      pageSize: formItem.pageSize,
    }">
      <template #Status="{ row }">
        <Tag color="green" v-if="row.status === 1">启用</Tag>
        <Tag color="magenta" v-if="row.status === 0">禁用</Tag>
      </template>
      <template #Action="{ row }">
        <Space>
          <Poptip transfer confirm title="是否启用?" @on-ok="cancel(row.userID, 1)" @on-cancel="cancel" ok-text="是"
            cancel-text="否">
            <Tooltip content="启用" placement="top" transfer><Button v-if="row.status === 0" type="success"
                icon="md-checkmark"></Button></Tooltip>
          </Poptip>
          <Poptip transfer confirm title="是否禁用?" @on-ok="cancel(row.userID, 0)" @on-cancel="cancel" ok-text="是"
            cancel-text="否">
            <Tooltip content="禁用" placement="top" transfer><Button v-if="row.status === 1" type="error"
                icon="md-close-circle"></Button></Tooltip>
          </Poptip>
        </Space>
      </template>
    </Table>
    <Pager :paras="{ total: table.total, pageNo: formItem.pageSize, pageSize: formItem.pageNo }" @toPage="initList"
      @toSize="initList">
    </Pager>
  </Card>
  <AddOrUpdate ref="modal" @initList="initList(1, 15)"></AddOrUpdate>
</template>
<script setup>
import Table from '@/components/system/Table.vue'
import Pager from '@/components/system/Pager.vue'
import http from '@/util/http'
import AddOrUpdate from './AddOrUpdate.vue'

let modal = ref()
let { proxy } = getCurrentInstance()
let form = ref()
let formItem = reactive({
  pageNo: 15,
  pageSize: 1,
  areaID: '',
  deptID: '',
  roleID: '',
  categoryID: '',
  phone: '',
  status: 0,
})

let areaList = reactive([])
const initAreaList = () => {
  http.get('/Basic/Area/List', {}, (response) => {
    areaList = response.data.data
  })
}
initAreaList();

let deptList = reactive([])
const initDeptList = () => {
  http.get('/Basic/Dept/List', {}, (response) => {
    deptList = response.data.data
  })
}
initDeptList();


let roleList = reactive([])
const initRoleList = (deptID) => {
  http.get('/Basic/Role/ListByDeptID?deptID=' + deptID, {}, (response) => {
    roleList = response.data.data
  })
}

let categoryList = reactive({ data: [] })
const initTreeList = (areaID) => {
  http.get('/Basic/Category/TreeList?areaID=' + areaID, {}, (response) => {
    categoryList.data = response.data.data
  })
}

const areaChg = (areaID) => {
  initTreeList(areaID);
}
const deptChg = (deptID) => {
  initRoleList(deptID);
}


let table = reactive({
  data: [],
  total: 0,
  columns: [
    {
      title: '登录名',
      align: 'center',
      key: 'loginName',
      width: 100,
    },
    {
      title: '姓名',
      align: 'center',
      key: 'realName',
      width: 100,
    },
    {
      title: '手机号码',
      align: 'center',
      key: 'phone',
      width: 100,
    },
    {
      title: '院区',
      align: 'center',
      key: 'areaName',
      width: 200,
    },
    {
      title: '部门',
      align: 'center',
      key: 'deptName',
      width: 100,
    },
    {
      title: '角色',
      align: 'center',
      key: 'roleName',
      width: 100,
    },
    {
      title: '科室',
      align: 'center',
      key: 'categoryName',
      width: 100,
    },
    {
      title: '用户状态',
      align: 'center',
      key: 'status',
      slot: 'Status',
      width: 100,
    },
    {
      title: '创建时间',
      align: 'center',
      key: 'addTime',
      width: 200,
    },
    {
      title: '操作',
      slot: 'Action',
      align: 'center',
      fixed: 'right'
    },
  ],
  load: true,
})

const initList = (page, size) => {
  formItem.pageNo = page
  formItem.pageSize = size
  table.load = true

  http.post('/Basic/User/PageList', toRaw(formItem), (response) => {
    table.load = false
    table.data = response.data.data.list
    table.total = response.data.data.total
  })
}

const refresh = () => {
  initList(1, 15)
}
const clear = () => {
  form.value.resetFields()
}


const add = (type, data) => {
  modal.value.show(type, data)
}

initList(1, 15)

const cancel = (id, status) => {
  http.post('/Basic/User/Enabled', { userID: id, status: status }, (response) => {
    if (response.data.flag) {
      proxy.$Message.success(response.data.msg)
      refresh()
    } else {
      proxy.$Message.error(response.data.msg)
    }
  })
}
</script>
<style scoped>
.search {
  padding-bottom: 15px;
}
</style>